<template>
  <view class="wai">
    <!-- <u-navbar :titleStyle="'{color: #ffffff}'" title="招商" bgColor="#1D1D29" :placeholder="true" :autoBack="true" leftIconSize="0" leftIconColor="#FFFFFF"></u-navbar> -->
    <view style="position: relative">
      <image class="image" src="https://img95.699pic.com/element/40030/1132.png_1200.png" mode=""></image>
      <view class="hezi">
        <view class="top">
          <view class="xian"></view>
          <view class="text">请提交您的相关信息</view>
        </view>
        <view class="shiname">
          <view class="mingc">实体名称</view>
          <input v-model="name" type="text" placeholder="请输入内容" />
        </view>
        <view class="shiname" @click="isShow = true">
          <view class="mingc">运营时间</view>
          <input v-model="operatetime" style="width: 420rpx" type="text" disabled="true" placeholder="请选择运营时间" />
          <!--    <view v-model="operatetime" style="width: 420rpx; color: #999" class="">
            {{ operatetime || '请选择运营时间' }}
          </view> -->
          <u-icon name="arrow-down"></u-icon>
        </view>
        <view class="shiname">
          <view class="mingc">联系姓名</view>
          <input v-model="contact" type="text" placeholder="请输入内容" />
        </view>
        <view class="shiname">
          <view class="mingc">联系电话</view>
          <input v-model="mobile" type="text" placeholder="请输入内容" />
        </view>
        <view class="shiname" @click="show = true">
          <view class="mingc">所在城市</view>
          <input v-model="city" style="width: 420rpx" type="text" disabled="true" placeholder="请选择城市" />
          <!-- <view v-model="city" style="width: 420rpx; color: #999" class=""> -->
          <!-- {{ city || '请选择城市' }} -->
          <!-- </view> -->
          <u-icon name="arrow-down"></u-icon>
        </view>
        <view class="shiname">
          <view class="mingc">详细地址</view>
          <input v-model="address" type="text" placeholder="请输入内容" />
        </view>
        <view class="btn" @click="btn">提交信息</view>
        <!--      <view class="bottom">
          <view class="top tbot">
            <view class="xian"></view>
            <view class="text">商家资质要求说明</view>
          </view>
          <view class="text">1.要求有二年以上线下商品经验</view>
          <view class="text">2.要求有二年以上线下商品经验</view>
          <view class="text">3.要求有二年以上线下商品经验</view>
        </view> -->
      </view>
    </view>
    <view class="">
      <!-- 时间选择器 -->
      <u-datetime-picker mode="date" @confirm="queren" @cancel="isShow = false" :show="isShow" v-model="value1"></u-datetime-picker>
    </view>
    <!-- 地区 -->
    <u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="cityConfirm" @change="changeHandler" @cancel="show = false"></u-picker>
  </view>
</template>

<script>
import cityData from '@/city.js';
import { onLoad } from '@dcloudio/uni-app';
import footer from '@/components/footer.vue';
export default {
  components: { 'v-footer': footer },
  data() {
    return {
      timestampInput: '', // 用来存储用户输入的时间戳
      name: '', //实体名称
      operatetime: '', //运营时间
      contact: '', //联系姓名
      mobile: '', //联系电话
      city: '', //所在城市
      address: '', //详细地址
      isShow: false, //控制时间选择器
      value1: Number(new Date()), //时间
      show: false, //控制城市选择器
      cityData: cityData,
      cityName: '',
      cityList: [],
      cityLevel1: [],
      cityLevel2: [],
      cityLevel3: []
    };
  },
  computed: {
    errorImageUrl() {
      return this.app.httpUrl + '/static/uniapp/img/568.png';
    }
  },
  methods: {
    onLoad() {
      this.initCityData();
    },

    // 提交信息
    btn() {
      if (this.mobile.length != 11) {
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '请填写正确的信息'
        });
        return;
      }
      var that = this;
      uni.request({
        url: that.app.apiHost + '/addConsult',
        method: 'POST',
        header: { Authorization: 'bearer ' + that.app.getAuthCode() },
        data: {
          name: this.name,
          operatetime: this.operatetime,
          contact: this.contact,
          mobile: this.mobile,
          city: this.city,
          address: this.address
        },
        success: (data) => {
          if (data.data.code == '1') {
            uni.showToast({
              icon: 'none',
              position: 'bottom',
              title: data.data.msg
            });
          } else {
            uni.showToast({
              icon: 'none',
              position: 'bottom',
              title: data.data.msg
            });
          }
          (this.name = ''), (this.operatetime = ''), (this.contact = ''), (this.mobile = ''), (this.city = ''), (this.address = '');
        }
      });
    },
    // 时间选择器的确认

    // 根据时间戳计算年月
    computeYearMonth(timestamp) {
      if (timestamp) {
        const date = new Date(timestamp);
        if (!isNaN(date.getTime())) {
          const year = date.getFullYear();
          const month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，所以需要+1，并补0
          const day = ('0' + date.getDate()).slice(-2); // 日期补0
          this.operatetime = `${year}-${month}-${day}`;
        } else {
          this.operatetime = '无效的时间戳';
        }
      }
    },
    queren(value) {
      console.log(value);
      this.timestampInput = value.value;
      this.computeYearMonth(parseInt(this.timestampInput, 10));
      // // 假设this.value1是一个日期对象
      // let date = new Date(this.value1);
      // // 使用Intl.DateTimeFormat来格式化日期，只包含年、月、日
      // let formatter = new Intl.DateTimeFormat('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
      // let formattedDate = formatter.format(date);
      // this.operatetime = formattedDate;
      this.isShow = false;
    },
    // 城市选择器的确认
    initCityData() {
      // 遍历城市js
      this.cityData.forEach((item1, index1) => {
        let temp2 = [];
        this.cityLevel1.push(item1.provinceName);
        let temp4 = [];
        let temp3 = [];
        // 遍历市
        item1.cities.forEach((item2, index2) => {
          temp2.push(item2.cityName);
          // 遍历区
          item2.counties.forEach((item3, index3) => {
            temp3.push(item3.countyName);
          });
          temp4[index2] = temp3;
          temp3 = [];
        });
        this.cityLevel3[index1] = temp4;
        this.cityLevel2[index1] = temp2;
      });
      // 选择器默认城市
      this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
    },
    // 选中时执行
    changeHandler(e) {
      const {
        columnIndex,
        index,
        indexs,
        value,
        values,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker
      } = e;
      if (columnIndex === 0) {
        // 选择第一列数据时
        // 设置第二列关联数据
        picker.setColumnValues(1, this.cityLevel2[index]);
        // 设置第三列关联数据
        picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
      } else if (columnIndex === 1) {
        // 选择第二列数据时
        // 设置第三列关联数据
        picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
      }
    },
    // 单击确认按钮时执行
    cityConfirm(e) {
      // 输出数组 [省, 市, 区]
      // 接口要的参数
      console.log(e.value.join('-'));
      this.city = e.value.join('-');
      // 隐藏城市选择器
      this.show = false;
    }
  }
};
</script>

<style lang="scss">
.wai {
  box-sizing: border-box;
  padding: 0 40rpx;
  .image {
    width: 100%;
    height: 250rpx;
  }
  .hezi {
    .bottom {
      .text {
        color: #999999;
        font-size: 23.08rpx;
      }
      .tbot {
        margin-bottom: 20rpx;
      }
      margin-top: 30rpx;
    }
    .btn {
      text-align: center;
      width: 500rpx;
      height: 77rpx;
      background-color: rgb(80, 154, 241);
      border-radius: 38rpx;
      line-height: 77rpx;
      font-size: 30.77rpx;
      color: #fff;
      margin: 80rpx auto;
    }
    .shiname {
      .mingc {
        width: 150rpx;
        margin-right: 15rpx;
      }
      align-items: center;
      display: flex;
      margin-top: 30rpx;
      width: 100%;
      border-bottom: 3rpx solid rgb(244, 244, 244);
      padding-bottom: 30rpx;
      font-size: 25rpx;
    }
    .top {
      display: flex;
      align-items: center;
      .xian {
        height: 30rpx;
        width: 8rpx;
        border-radius: 2rpx;
        background-color: rgb(82, 134, 219);
        margin-right: 12rpx;
      }
      .text {
        font-weight: 700;
      }
    }
    position: absolute;
    width: 610rpx;
    top: 220rpx;
    left: 30rpx;
    height: 500rpx;
    background-color: #fff;
    border-radius: 15rpx 15rpx 0 0;
    padding: 15rpx;
  }
}
</style>
